<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>

    <!--引入vue-->
    <script src="./js/vue.js"></script>
    <!--引入Element-->
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/index.css">

    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>

    <style>
        #app {
            width: 100vw;
            height: 100vh;
            background: url("./img/bg4.jpg") repeat 0px 0px;
            padding-top: 30vh;
        }

        .login-container {
            width: 100%;
            height: 100%;
            background-size: 100%;
        }

        .login-form {
            width: 300px;
            margin: 0 auto;
        }

        .title-style {
            width: 300px;
            height: 50px;
            margin: 0 auto;
            /* 字体大小与h1标签一致，这里假设h1的字体大小是2em */
            font-size: 2em;
            /* 字体样式，如果需要可以与h1标签保持一致 */
            font-family: 'Exo 2', sans-serif;
            /* 文本颜色，根据需要调整 */
            color: #2B2B36;
            /* 确保文字在flex容器中居中 */
            text-align: center;
            /* 其他样式可以根据设计需要添加 */
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-container">
        <div class="title-style">图书管理系统</div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form" label-width="50">
            <el-form-item label="账号" prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="flag">
                <el-select v-model="loginForm.flag" placeholder="请选择">
                    <el-option label="读者" value="1"></el-option>
                    <el-option label="管理员" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123456',
                    flag: '0'
                },
                rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    flag: [
                        {required: true, message: '请选择身份', trigger: 'change'}
                    ]
                },
            };
        },
        methods: {
            submitForm() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        // 在这里发起登录请求 注意发送请求一定要加$
                        $axios.post('/user?m=login', this.loginForm).then(res => {
                                console.log(res)
                                if (res.code === 1) {
                                    window.location.href = '/';
                                } else {
                                    this.$message.error(res.msg);
                                }
                            }
                        ).catch(err => {
                            console.log(err)
                        })
                        // 清空表单
                        this.loginForm.username = ""
                        this.loginForm.password = ""
                    } else {
                        console.log('提交失败!');
                        return false;
                    }
                });
            }
        },
    });
</script>
</body>
</html>